<template>
	<view class="container">
	  <!-- 顶部用户信息 -->
	  <view class="user-header">
		<view class="user-info" @click="toUserInfo">
		  <image 
			class="avatar" 
			:src="getAvatarUrl"
			mode="aspectFill"
		  />
		  
		  <view class="info-right">
			<text class="name" v-if="hasLogin">
			  {{userInfo.nickname || userInfo.username || userInfo.mobile || '未设置昵称'}}
			</text>
			<text class="name" v-else @click.stop="toLogin">点击登录</text>
			<text class="user-id" v-if="hasLogin">ID: {{userInfo._id}}</text>
		  </view>
		</view>
	  </view>
  
	  <!-- VIP会员卡片 -->
	  <view class="vip-card" @tap="goToVip">
		<view class="vip-info">
		  <view class="left">
			<text class="title">{{ hasLogin ? (userInfo.vip_level || '普通用户') : '开通会员' }}</text>
			<text class="expiry">{{ hasLogin ? (userInfo.vip_expire_time ? '到期时间: ' + formatDate(userInfo.vip_expire_time) : '立即开通尊享权益') : '立即开通尊享权益' }}</text>
		  </view>
		  <view class="right">
			<button class="vip-button">立即开通</button>
		  </view>
		</view>
		<!-- VIP权益展示 -->
		<view class="vip-benefits">
		  <view class="benefit-item" v-for="(item, index) in vipBenefits" :key="index">
			<text class="iconfont" :class="item.icon"></text>
			<text>{{item.text}}</text>
		  </view>
		</view>
	  </view>
  
	  <!-- 功能列表 -->
	  <uni-list class="menu-list" v-for="(sublist, index) in menuList" :key="index">
		<uni-list-item 
		  v-for="(item, i) in sublist" 
		  :key="i"
		  :title="item.title"
		  :to="item.to"
		  link
		  :clickable="true"
		  @click="handleMenuClick(item)"
		  :show-extra-icon="true"
		  :extra-icon="{type: item.icon, color: '#999'}"
		/>
	  </uni-list>
  
	  <!-- 退出登录按钮 -->
	  <view class="logout-section" v-if="hasLogin">
		<button class="logout-btn" @click="handleLogout">退出登录</button>
	  </view>
	</view>
  </template>
  
  <script>
  import { store, mutations } from '@/uni_modules/uni-id-pages/common/store.js'
  
  export default {
	data() {
	  return {
		vipBenefits: [
		  { icon: 'icon-analysis', text: '不限次数专利分析' },
		  { icon: 'icon-ai', text: 'AI智能解读' },
		  { icon: 'icon-data', text: '专业数据服务' }
		],
		menuList: [
		  [
			{
			  title: '我的关注',
			  icon: 'star-filled',
			  event: 'handleFollowClick',
			  needLogin: true
			},
			{
			  title: '浏览记录',
			  icon: 'clock-filled',
			  event: 'handleHistoryClick',
			  needLogin: true
			}
		  ],
		  [
			{
			  title: '账号设置',
			  icon: 'gear',
			  to: '/uni_modules/uni-id-pages/pages/userinfo/userinfo',
			  needLogin: true
			},
			{
			  title: '安全设置',
			  icon: 'locked',
			  to: '/uni_modules/uni-id-pages/pages/userinfo/deactivate',
			  needLogin: true
			}
		  ],
		  [
			{
			  title: '关于我们',
			  icon: 'info',
			  event: 'handleAboutClick'
			},
			{
			  title: '联系客服',
			  icon: 'chat',
			  event: 'handleServiceClick'
			}
		  ]
		]
	  }
	},
	computed: {
	  userInfo() {
		return store.userInfo
	  },
	  hasLogin() {
		return store.hasLogin
	  },
	  getAvatarUrl() {
		if (this.hasLogin && this.userInfo.avatar_file && this.userInfo.avatar_file.url) {
		  return this.userInfo.avatar_file.url
		}
		return '/static/images/profile/avatar.png'
	  }
	},
	onShow() {
	  // 页面显示时刷新用户信息
	  if (this.hasLogin) {
		this.getUserInfo()
	  }
	},
	methods: {
	  // 获取最新用户信息
	  async getUserInfo() {
		try {
		  await mutations.updateUserInfo()
		} catch (e) {
		  console.error('获取用户信息失败', e)
		}
	  },
	  
	  // 格式化日期
	  formatDate(timestamp) {
		if (!timestamp) return ''
		const date = new Date(timestamp)
		return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
	  },
	  
	  // 跳转到用户信息页
	  toUserInfo() {
		if (!this.hasLogin) {
		  this.toLogin()
		  return
		}
		uni.navigateTo({
		  url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
		})
	  },
	  
	  // 跳转到登录页
	  toLogin() {
		uni.navigateTo({
		  url: '/uni_modules/uni-id-pages/pages/login/login-withoutpwd',
		  fail: (err) => {
			uni.showToast({
			  title: '跳转登录页失败',
			  icon: 'none'
			})
			console.error('跳转登录页失败:', err)
		  }
		})
	  },
	  
	  // 处理菜单点击
	  handleMenuClick(item) {
		if (item.needLogin && !this.hasLogin) {
		  this.toLogin()
		  return
		}
		
		try {
		  const token = uni.getStorageSync('uni_id_token')
		  if (item.needLogin && !token) {
			this.toLogin()
			return
		  }
		  if (item.event) {
			this[item.event]()
		  }
		} catch (err) {
		  console.error('获取token失败:', err)
		  uni.showToast({
			title: '登录状态异常，请重新登录',
			icon: 'none'
		  })
		  this.toLogin()
		}
	  },
	  
	  // 退出登录
	  async handleLogout() {
		uni.showModal({
		  title: '提示',
		  content: '确定要退出登录吗？',
		  success: async (res) => {
			if (res.confirm) {
			  await mutations.logout()
			  uni.showToast({
				title: '已退出登录',
				icon: 'none'
			  })
			}
		  }
		})
	  },
	  
	  // VIP相关
	  goToVip() {
		if (!this.hasLogin) {
		  this.toLogin()
		  return
		}
		const token = uni.getStorageSync('uni_id_token')
		if (!token) {
		  this.toLogin()
		  return
		}
		uni.navigateTo({
		  url: '/pages/mine/vip'
		})
	  },
	  
	  // 其他功能方法
	  handleFollowClick() {
		uni.navigateTo({
		  url: '/pages/mine/follow'
		})
	  },
	  
	  handleHistoryClick() {
		uni.navigateTo({
		  url: '/pages/mine/history'
		})
	  },
	  
	  handleAboutClick() {
		uni.navigateTo({
		  url: '/pages/mine/about'
		})
	  },
	  
	  handleServiceClick() {
		uni.setClipboardData({
		  data: 'customer_service_wechat',
		  success: () => {
			uni.showToast({
			  title: '客服微信已复制',
			  icon: 'none'
			})
		  }
		})
	  }
	}
  }
  </script>
  
  <style lang="scss">
  .container {
	min-height: 100vh;
	background: #f5f6fa;
	padding-bottom: 30rpx;
  }
  
  .user-header {
	background: linear-gradient(135deg, #0081f9, #0065c8);
	padding: 40rpx 30rpx;
	margin: 5rpx;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 16rpx rgba(0,129,249,0.1);
	
	.user-info {
	  display: flex;
	  align-items: center;
	  gap: 20rpx;
	  
	  .avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 4rpx solid rgba(255,255,255,0.3);
	  }
	  
	  .info-right {
		.name {
		  font-size: 36rpx;
		  color: #fff;
		  font-weight: 500;
		  margin-bottom: 8rpx;
		}
		
		.user-id {
		  font-size: 24rpx;
		  color: rgba(255,255,255,0.8);
		}
	  }
	}
  }
  
  .vip-card {
	margin: 5rpx;
	padding: 30rpx;
	background: linear-gradient(135deg, #1a2b4a, #2c3e60);
	border-radius: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.1);
	position: relative;
	overflow: hidden;
	
	.vip-info {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  position: relative;
	  
	  .left {
		.title {
		  font-size: 32rpx;
		  font-weight: bold;
		  color: #e6b94d;
		  margin-bottom: 8rpx;
		}
		
		.expiry {
		  font-size: 24rpx;
		  color: rgba(255,255,255,0.6);
		}
	  }
	  
	  .right {
		display: flex;
		align-items: center;
		gap: 12rpx;
		
		.vip-button {
		  padding: 16rpx 40rpx;
		  background: linear-gradient(135deg, #e6b94d, #c4a149);
		  color: #fff;
		  border-radius: 100rpx;
		  font-size: 28rpx;
		  font-weight: 500;
		  
		  &:active {
			opacity: 0.8;
		  }
		}
	  }
	}
  }
  
  .vip-benefits {
	display: flex;
	justify-content: space-around;
	margin-top: 30rpx;
	padding-top: 30rpx;
	border-top: 1px solid rgba(255,255,255,0.1);
	position: relative;
	
	.benefit-item {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  gap: 8rpx;
	  
	  .iconfont {
		font-size: 48rpx;
		color: #e6b94d;
	  }
	  
	  text {
		font-size: 24rpx;
		color: rgba(255,255,255,0.8);
	  }
	}
  }
  
  .menu-list {
	margin:5rpx;
	background: #fff;
	border-radius: 16rpx;
	overflow: hidden;
	
	.menu-item {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 30rpx;
	  border-bottom: 1px solid #f0f0f0;
	  
	  &:last-child {
		border-bottom: none;
	  }
	  
	  .item-left {
		display: flex;
		align-items: center;
		gap: 20rpx;
		
		.iconfont {
		  font-size: 40rpx;
		  color: #1890ff;
		}
		
		text {
		  font-size: 28rpx;
		  color: #333;
		}
	  }
	  
	  .icon-right {
		font-size: 32rpx;
		color: #999;
	  }
	}
  }
  
  .logout-section {
	margin: 30rpx;
	
	.logout-btn {
	  background: #fff;
	  color: #ff5a5f;
	  border: none;
	  border-radius: 12rpx;
	  font-size: 32rpx;
	  
	  &:active {
		opacity: 0.8;
	  }
	}
  }
  </style>